<nz-card [nzTitle]="titleTemplate">
  <nz-empty *ngIf="tableDetails.columns.length <= 0; else notHasValues"
            [nzNotFoundContent]="contentTemplate"
            [nzNotFoundFooter]="footerTemplate">
    <ng-template #contentTemplate>
    </ng-template>
    <ng-template #footerTemplate>
      <button nz-button nzType="primary" (click)="handlerOpenModal(0)">
        {{'common.add'|translate}}
      </button>
    </ng-template>
  </nz-empty>
  <ng-template #notHasValues>
    <nz-table #basicTable [nzData]="tableDetails.columns">
      <thead>
      <tr>
        <th>{{'common.alias' | translate}}</th>
        <th>{{'common.name' | translate}}</th>
        <th>{{'common.host' | translate}}</th>
        <th>{{'common.protocol' | translate}}</th>
        <th>{{'common.username' | translate}}</th>
        <th>{{'common.action' | translate}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{data.alias}}</td>
        <td>{{data.name ? data.name : '-'}}</td>
        <td>{{data.host}}</td>
        <td>{{data.protocol}}</td>
        <td>{{data.username ? data.username : '-'}}</td>
        <td>
          <button nz-button nzShape="circle" nzSize="small" nzDanger
                  nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzPopconfirmShowArrow]="false"
                  nz-tooltip nzTooltipTitle="{{'common.delete' | translate}}"
                  [nzCancelText]="'common.cancel'|translate"
                  [nzOkText]="'common.ok'|translate"
                  (nzOnConfirm)="handlerDelete(data.alias)">
            <i class="fa fa-trash"></i>
          </button>
          <button nz-button nzShape="circle" nzSize="small" nzType="primary"
                  nz-tooltip nzTooltipTitle="{{'common.edit' | translate}}">
            <i class="fa fa-edit" (click)="handlerOpenModal(2, data.alias)"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-card>
<ng-template #titleTemplate>
  <button nz-button nzType="primary" nzShape="circle" nzSize="small"
          nz-tooltip nzTooltipTitle="{{'common.add' | translate}}"
          (click)="handlerOpenModal(0)">
    <i class="fa fa-plus"></i>
  </button>
  <button nz-button nzType="dashed" nzShape="circle" nzSize="small"
          nz-tooltip nzTooltipTitle="{{'common.refresh' | translate}}"
          (click)="handlerRefresh()">
    <i class="fa fa-refresh"></i>
  </button>
</ng-template>
<nz-modal
  [(nzVisible)]="dialog.create"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  nzMaskClosable="false"
  (nzOnCancel)="handlerCloseModal()">
  <ng-template #modalTitle>
    {{'common.datasource' | translate}}
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" class="login-form">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="alias">{{'common.alias'|translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.alias'|translate}}">
          <nz-input-group>
            <input type="text" nz-input formControlName="alias" [(ngModel)]="formInfo.alias"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired
                       nzFor="protocol">{{'common.protocol'|translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.protocol'|translate}}">
          <nz-radio-group formControlName="protocol" [(ngModel)]="formInfo.protocol">
            <label nz-radio nzValue="HTTP">HTTP</label>
            <label nz-radio nzValue="HTTPS" nzDisabled>HTTPS</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="host">{{'common.host'| translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.host'|translate}}">
          <nz-input-group>
            <input type="text" nz-input formControlName="host" [(ngModel)]="formInfo.host"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="port">{{'common.port'| translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.port'|translate}}">
          <nz-input-group>
            <input type="text" nz-input formControlName="port" [(ngModel)]="formInfo.port"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">{{'common.username'| translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.username'|translate}}">
          <nz-input-group>
            <input type="text" nz-input formControlName="username" [(ngModel)]="formInfo.username"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password">{{'common.password'| translate}}</nz-form-label>
        <nz-form-control nzErrorTip="{{'placeholder.password'|translate}}">
          <nz-input-group>
            <input type="text" nz-input formControlName="password" [(ngModel)]="formInfo.password"/>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #modalFooter>
    <button [disabled]="loading.button" [nzLoading]="loading.button" nz-button nzType="dashed"
            (click)="handlerSubmitForm()">
      {{'common.test' | translate}}
    </button>
    <button [disabled]="loading.button" nz-button nzDanger
            (click)="handlerCloseModal()">
      {{'common.close' | translate}}
    </button>
    <button nz-button nzType="primary" [disabled]="disabled.button"
            (click)="actionType === 0 ? handlerSave() : handlerUpdate()">
      {{'common.ok' | translate}}
    </button>
  </ng-template>
</nz-modal>
